<!--  -->
<template>
<div class=''>
     <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
        <el-table
      :data="list"
      style="width: 100%"
      border
      stripe
      >
       <el-table-column
        type="index"
        label="#"
       ></el-table-column>
      <el-table-column
        prop="authName"
        label="权限名称"
       >
      </el-table-column>
      <el-table-column
        prop="path"
        label="路径"
       >
      </el-table-column>
      <el-table-column
        prop="level"
        label="权限等级">
<template slot-scope="scope">
            <el-tag v-if="scope.row.level==1">一级</el-tag>
            <el-tag type="success" v-if="scope.row.level==2">二级</el-tag>
            <el-tag type="warning" v-if="scope.row.level==3">三级</el-tag>
</template>

      </el-table-column>
    </el-table>
    </el-card>


</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
  list:[]
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  async requestRights(){
    const {data} =  await this.$http.get("/rights")
    console.log(data);
    if(data.err==0){
        this.list = JSON.parse(data.data)
        this.$message.success("数据请求成功")
    }else{
        this.$message.error("数据请求失败")
    }
    
  }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
  this.requestRights()
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
deactivated() {}
}
</script>
<style  scoped>

</style>